<template>
	<view>
		<view class="head">
			<view class="item">
				<view class="brief">
					<view class="item_son">名称：{{goodsDetail.name}}</view>
					<view class="item_son">种类：{{goodsDetail.cate}}</view>
					<view class="item_son">年化收益率：{{goodsDetail.rate}}%</view>
				</view>
				
				
				<view class="detail">
					<view class="item_son">介绍：</view>
					<view class="item_son">{{goodsDetail.detail}}</view>
				</view>
				
			</view>
			<image src="../../static/thing.png" mode=""></image>
		</view>
		
		<view class="btn">
			<button type="default" @tap="openBuy">购买</button>
		</view>
		

		<view class="buy" v-if="isbuy">
			<text>购买金额</text>
			<input type="text" v-model="amount">
			<view class="btn">
			<button type="default"  @tap="buyVerify" @tap.stop="openBuy"> 买</button>
			</view>
			
		</view>

	</view>
</template>

<script>
	import urls from '@/common/urls.js'
	export default {
		data() {
			return {
				id: null,
				goodsDetail: [],
				isbuy: false,
				amount: 0,
				userInfo: []
			}
		},
		methods: {
			getDetail() {
				const that = this;
				this.$axios.post(urls.graphql, {
						query: `
							query goodsDetail {
								goodsDetail(id: ${this.id},) {
									name
									cate
									detail
									rate
								}
							}`
					}, )
					.then(res => {
						const goodsDetail = res.data.goodsDetail;
						console.log("goodsDetail ok", goodsDetail);
						that.goodsDetail = goodsDetail[0];
					})
					.catch(err => {
						console.log("err", err)
						uni.showToast({
							title: '未知错误',
							icon: 'none'
						})
					})
			},
			openBuy() {
				this.isbuy = !this.isbuy;

			},
			
			buyVerify(){
				let that = this
				uni.showModal({
					title:"购买确认",
					content:`是否购买 ${that.amount} 元的${that.goodsDetail.name}`,
					success() {
						that.buy()
					}
				})
			},
			
			buy() {
				const that = this;
				this.$axios.post(urls.graphql, {
						query: `
							query goodsBuy {
							   goodsBuy(id:"${that.id}",userId:"${that.userInfo.id}",amount:${that.amount}) {
								   msg
								   status
								}
							}`
					}, )
					.then(res => {
						if(res.errors){
							uni.showToast({
								title: '购买失败，请检查余额',
								icon: 'none'
							})
						}
						else{
							const goodsBuy = res.data.goodsBuy;
							console.log(goodsBuy);
							if (goodsBuy.length !== 0) {
								console.log("goodsBuy ok", goodsBuy);
								that.userInfo.money -= that.amount;
								uni.setStorage({
									key: 'userInfo',
									data: that.userInfo,
									success: (data) => {
										uni.showToast({
											title: '完成购买',
											icon: 'none'
										})
									}
								})
							}
						}	
					})
					.catch(err => {
						console.log("err", err)
						uni.showToast({
							title: '未知错误',
							icon: 'none'
						})
					})
			}
		},
		onLoad(options) {
			let that = this;
			console.log(options)
			that.id = options.id
			that.getDetail()
			uni.getStorage({
				key: 'userInfo',
			 success: function(res) {
					// console.log(res.data);
					let userInfo = res.data;
					that.userInfo = userInfo;
					that.hasUserInfo = true;
				}
			});
		}
	}
</script>

<style lang="scss">
.head{
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	.item_son{
		margin-bottom: 10rpx;
		
	}
	image{
		width: 200rpx;
		height: 200rpx;
	}
}
.btn{
	button{
		background: #4768f3;
		width: 610rpx; 
		color: white;
		margin-top: 20rpx;
		margin-left: 40rpx;
		margin-bottom: 20rpx;
	}
}
.buy{
	margin-top: 20rpx;
	font-size: 40rpx;
	margin-bottom: 20rpx;
	text{
		margin-left: 40rpx;
		color: #333333;
		font-size: 32rpx;
		font-weight: 900;
	}
	input{
		margin-left: 40rpx;
		background: #f3f3f3;
		margin-top: 10rpx;
		width: 600rpx;
		height: 70rpx;
		font-size: 32rpx;
		padding-left: 10rpx;
		border-radius: 10rpx;
	}
}
.detail{
	margin-top: 100rpx;
}
</style>
